<template>
    <div>
        <!-- 添加--查询 -->
        <div>
            <el-input style="width:200px;height:25px" />
            <el-button type="primary" style="width:50px;margin-left:10px;height:25px">查询</el-button>
            <el-button type="success" style="width:50px;margin-left:10px;height:25px" @click="getadd">添加</el-button>
        </div>
        <!-- 列表 -->
        <div style="margin-top: 20px;">
            <el-tree :data="datalist" :props="defaultProps" @node-click="handleNodeClick" node-key="id"
                default-expand-all :expand-on-click-node="false">
                <template #default="{ node }" style="height: 90px;">
                    <span class="custom-tree-node">
                        <span style="width: 200px;">{{ node.label }}</span>
                        <el-button type="success" style="width:80px;margin-left:10px;height:25px"
                            @click="lineAdd(node)">添加
                        </el-button>
                        <el-button type="primary" style="width:50px;margin-left:10px;height:25px"
                            @click="lineMod(node)">修改</el-button>
                        <el-button type="danger" style="width:50px;margin-left:10px;height:25px" @click="lineDel(node)">
                            删除</el-button>
                    </span>
                </template>
            </el-tree>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, reactive, ref, watch, watchEffect, } from 'vue';
import http from '../../api/keyboard/keyboard'
import { useRouter } from "vue-router";
const router = useRouter()
// --------- 行内删除 ----------
const lineDel = (val: any) => {
    console.log(val);

}
// --------- 行内修改 ----------
const lineMod = (val: any) => {
    console.log(val);

}
// --------- 行内添加 ----------
const lineAdd = (val: any) => {
    console.log(val);

}
// --------- 上面的添加 --------
const getadd = () => {
    console.log("添加");
    router.push('/charts/line')
}


// ----------列表-------
const datalist = ref([])
const handleNodeClick = (data: any) => {
    // console.log(data)
}
const defaultProps = {
    children: 'son',
    label: 'name',
}
const getList = async () => {
    const res = await http.departmentList({})
    // console.log(res);
    if (res.code == "00000") {
        datalist.value = res.data
        // console.log(datalist.value);
    }
}
onMounted(() => {
    getList()
})
</script>

<style scoped lang='less'>
/* @import url(); 引入css类 */

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>